<html>
    <head>
        <meta charset="utf-8">
        <title>地图飞行</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", { 
                    center: [39.90,116.39],
                    zoom: 1,
                });

                L.tileLayer( 
                    'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                ).addTo(map);
            }

            function onFlyTo(){
                //读取纬度值
                var lat  = parseFloat(
                        document.getElementById("lat").value
                    );
                //读取经度值
                var lng  = parseFloat(
                        document.getElementById("lng").value
                    );
                //读取Zoom值
                var zoom = document.getElementById("zoom").value;

                //设置地图的中心点和zoom值
                map.flyTo(
                    L.latLng(lat, lng),     //center
                    zoom                    //zoom
                );
            }

        </script>
            
    </head>
    <body onload="init()">
        <span>地图以动画的方式飞行到指定center和zoom</span><br>
        <span>纬度:<input id="lat" type="text"  size="10" value="39.90" ></span>
        <span>经度:<input id="lng" type="text"  size="10" value="116.39"></span>
        <span>层级:<input id="zoom" type="text" size="10" value="11"></span>
        <span><input type="button" value="飞行" onclick="onFlyTo()"></span>
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



